<template>
	<div style="width: 100%; margin-bottom: 80px">
		<el-row>
			<el-col :span="24">
				<el-card>
					<div class="company_header">
						<div class="logo"><el-image src="https://p0.itc.cn/q_70/images03/20230424/e10fae1228ac4c7e98a8366c7c36168b.png"></el-image></div>
						<div class="company">
							<div class="name">上海能辉科技股份有限公司</div>
							<div class="label">
								<li>战略融资</li>
								<li>IPO上市</li>
								<li>上市公司</li>
								<li>高新技术企业</li>
								<li>出口型企业</li>
								<div class="cl"></div>
							</div>
							<div class="description">
								<el-row>
									<el-col :span="8">
										<span>企业官网：</span>
										www.nhet.com.cn
									</el-col>
									<el-col :span="8">
										<span>联系电话：</span>
										021-50896255
									</el-col>
									<el-col :span="8">
										<span>所属地区：</span>
										中国 - 上海市 - 上海市
									</el-col>
									<el-col :span="24">
										<span>联系地址：</span>
										上海市普陀区金通路799、899、999号17幢3层307室
									</el-col>
									<el-col :span="24">
										<span>所属产业：</span>
										新材料-电子信息和软件服务-显示器件 -下游-新能源，新材料-电子信息和软件服务-锂电池-下游-新能源 新材料-电子
									</el-col>
								</el-row>
							</div>
						</div>
						<div class="company_right">
							<div class="button">
								<li>重点关注</li>
								<li>下载报告</li>
								<li>分析报告</li>
							</div>
							<div class="chart">
								<div></div>
								<div></div>
							</div>
							<div class="table">
								<li><span>9</span><br />等级</li>
								<li><span>90-99</span><br />分数</li>
								<li><span>投资分线低</span><br />投资风险</li>
								<li><span>查看</span><br />分析</li>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col>
				<el-card style="padding: 30px 10px">
					<el-row>
						<el-col :span="4">
							<div class="company-text-description">
								<div class="icon"><el-image src="/src/assets/icon.jpg"></el-image></div>
								<div class="title">公司董事长</div>
								<div class="content">罗传奎</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="company-text-description">
								<div class="icon"><el-image src="/src/assets/icon.jpg"></el-image></div>
								<div class="title">成立时间</div>
								<div class="content">2009-02-24</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="company-text-description">
								<div class="icon"><el-image src="/src/assets/icon.jpg"></el-image></div>
								<div class="title">企业人数</div>
								<div class="content">148人</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="company-text-description">
								<div class="icon"><el-image src="/src/assets/icon.jpg"></el-image></div>
								<div class="title">联系方式</div>
								<div class="content">021-50896255</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="company-text-description">
								<div class="icon"><el-image src="/src/assets/icon.jpg"></el-image></div>
								<div class="title">融资轮次</div>
								<div class="content">IPO上市</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="company-text-description">
								<div class="icon"><el-image src="/src/assets/icon.jpg"></el-image></div>
								<div class="title">所属行业</div>
								<div class="content">建筑装饰</div>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">基本情况</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">企业基础资质</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">产业链分类</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">产品名称</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">股东投资人</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">公司高管</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">供应商</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">客户</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">对外投资布局</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">知识产权</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">融资历程</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">招投标</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">企业经营风险</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">所属商会协会</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">招聘</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">企业舆情</div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="cgjudgeLists">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getList, getListAll, del, batDel, change } from '/@/api/cgjudge/index';
import * as echarts from 'echarts';
import { el } from 'element-plus/es/locale';

// 引入组件
const List = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/List.vue'));
const Menu = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/Menu.vue'));
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const EditDialog = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/form/edit.vue'));
// 定义变量内容
const tableRef = ref<RefType>();
const value = ref(4);
const editRef = ref();
const state = reactive<TableDemoState>({
	tableData: {
		// 列表数据（必传）
		data: [],
		// 表头内容（必传，注意格式）
		header: [
			{ key: 'name', colWidth: '', title: '姓名', type: 'text', isCheck: true },
			{ key: 'court', colWidth: '', title: '法院', type: 'text', isCheck: true },
			{ key: 'duties', colWidth: '', title: '职务', type: 'text', isCheck: true },
			{ key: 'phone', colWidth: '', title: '联系方式', type: 'text', isCheck: true },
			{ key: 'dutyTime', colWidth: '', title: '值班时间', type: 'text', isCheck: true },
			{ key: 'dutyAddress', colWidth: '', title: '值班地点', type: 'text', isCheck: true },
		],
		// 配置项（必传）
		config: {
			total: 0, // 列表总数
			loading: true, // loading 加载
			isButton: true,
			isBorder: false, // 是否显示表格边框
			isSerialNo: false, // 是否显示表格序号
			isSelection: true, // 是否显示表格多选
			isOperate: true, // 是否显示表格操作栏
		},
		// 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
		search: [
			{ label: '年份', prop: 'name', placeholder: '请选择', required: false, type: 'input' },
			{ label: '月份', prop: 'court', placeholder: '请选择', required: false, type: 'input' },
		],
		// 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
		param: {
			page: 1,
			psize: 10,
		},
		//显示分页
		showpage: 1,
		// 打印标题
		printName: '数据打印',
		//列字典
		dictData: {},
	},
});

// 初始化列表数据
const getTableData = () => {
	state.tableData.config.loading = true;
	state.tableData.data = [];
	getList(state.tableData.param).then((response: any) => {
		state.tableData.data = response.data.data;
		state.tableData.config.total = response.data.total;
		state.tableData.config.loading = false;
	});
};

// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
	state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
	tableRef.value.pageReset();
};
// 删除当前项回调
const onTableDelRow = (row: EmptyObjectType) => {
	return del(row.id).then(() => {
		getTableData();
		ElMessage.success(`删除法官${row.name}成功！`);
	});
};
const onTableBatchDel = (ids: string) => {
	return batDel(ids).then(() => {
		getTableData();
		ElMessage.success(`批量删除成功！`);
	});
	console.log(ids);
};
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
	state.tableData.param.page = page.page;
	state.tableData.param.psize = page.psize;
	getTableData();
};
// 拖动显示列排序回调
const onSortHeader = (data: TableHeaderType[]) => {
	state.tableData.header = data;
};

/** 新增按钮操作 */
const onTableAddRow = () => {
	editRef.value.openDialog('add');
};
/** 修改按钮操作 */
const onTableUpdateRow = (row: any) => {
	editRef.value.openDialog('edit', row);
};

// 页面加载时
onMounted(() => {
	getTableData();
	// 关联查询
});
</script>

<style scoped lang="scss">
.company_header {
	display: flex;
	.logo {
		width: 120px;
		height: 70px;
		padding: 0 10px;
		margin-right: 20px;
		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1), 0px -2px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 6px;
		float: left;
		.el-image {
			width: 100px;
			height: 70px;
			img {
				max-height: 100px;
			}
		}
	}
	.company {
		width: 70%;
		.name {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 30px;
			color: #000000;
			line-height: 30px;
		}
		.label {
			margin-top: 15px;
			li {
				float: left;
				background: rgba(74, 152, 253, 0.2);
				border-radius: 4px;
				padding: 5px 15px;
				margin-right: 20px;
				color: #4a98fd;
				list-style: none;
			}
		}
		.description {
			margin-top: 15px;
			line-height: 30px;
			span {
				color: #999;
			}
		}
	}
	.company_right {
		float: left;
		padding: 0 10px;
		.button {
			height: 50px;
			margin-left: 20px;
			li {
				float: left;
				font-family: Microsoft YaHei;
				font-weight: 400;
				font-size: 16px;
				color: #ffffff;
				line-height: 30px;
				background: #4a98fd;
				border: 2px solid #4a98fd;
				border-radius: 4px;
				list-style: none;
				margin-left: 30px;
				padding: 5px 10px;
				cursor: pointer;
			}
			li:hover {
				background: #ffffff;
				border-radius: 4px;
				font-weight: 400;
				border: 2px solid #4a98fd;
				color: #4a98fd;
			}
		}
		.chart {
			height: 150px;
		}
		.table {
			background: #ffffff;
			border-radius: 6px;
			border: 1px solid #4a98fd;
			display: flex;
			padding: 10px 40px;
			li {
				list-style: none;
				float: left;
				padding: 0 15px;
				margin: 5px 0;
				line-height: 30px;
				text-align: center;
				border-right: 1px solid #dbdbdb;
				span {
					color: #4a98fd;
				}
			}
			li:last-child {
				border: none;
			}
		}
	}
}
.company-text-description {
	text-align: center;
	align-items: center;
	.icon {
		width: 60px;
		height: 60px;
		position: relative;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 60px; /* 或者你需要的宽度 */
		height: 60px;
	}
	.title {
		color: #999;
		margin-top: 10px;
		font-weight: 400;
		font-size: 14px;
	}
	.content {
		margin-top: 10px;
		font-size: 22px;
		font-weight: 400;
		font-size: 22px;
		color: #000000;
	}
}
.cl {
	clear: both;
}
.el-card {
	margin: 10px 0 10px 10px;
}
.card-header {
	height: 35px;
	.icon {
		float: left;
		margin-right: 15px;
	}
	.title {
		font-size: 22px;
		color: #010101;
		float: left;
	}
	.remind {
		height: 16px;
		background: #ff0000;
		border-radius: 6px 6px 6px 0px;
		float: left;
		color: #ffff;
		margin-left: 10px;
		text-align: center;
		padding: 0px 5px;
		font-size: 12px;
	}
	.more {
		background-image: url('/src/assets/more.png');
		width: 16px;
		height: 14px;
		float: right;
		margin-top: 10px;
		background-size: 100% 100%;
	}
}
</style>
